<template>
  <div style="padding: 10px">
    <div class="card-container">
      <el-card
          v-for="room in tableData"
          :key="room.id"
          :style="{ width: getCardWidth() + 'px' }"
          @click="goToDetails(room.id)"
      >
        <img :src="room.coverImage" alt="Room Image" style="width: 100%; height: 150px;">
        <div class="room-name">{{ room.roomName }}</div>
        <div class="room-category">{{ room.category }}</div>
        <div class="room-price">{{ room.price }}元</div>
      </el-card>
    </div>
    <div style="margin: 10px 0">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import router from "@/router";

export default {
  name: "CheckIn",
  components: {},
  data() {
    return {
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
    }
  },
  methods: {
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    load() {
      request.get("/user/getHomeCardPage", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    goToDetails(id) {
      // 这里可以实现跳转到详情页面的逻辑，例如使用路由跳转
      this.$router.push({ path: '/HotelRoomInfo', query: { id: id } });
    },
    getCardWidth() {
      // 根据窗口宽度动态计算卡片宽度
      const windowWidth = window.innerWidth;
      if (windowWidth >= 1200) {
        return 250;
      } else if (windowWidth >= 992) {
        return 300;
      } else if (windowWidth >= 768) {
        return 400;
      } else {
        return windowWidth * 0.9;
      }
    }
  },
  created() {
    this.load();
    window.addEventListener('resize', this.getCardWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getCardWidth);
  }
};
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.el-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.room-name {
  font-size: 16px;
  font-weight: bold;
}

.room-category {
  color: #777;
}

.room-price {
  color: #ff5722;
}
</style>
